<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			html{
				font-size: 30px;
			}
			div{
				font-size: 16px;
			}
			
			.div01 {
				font-size: 10px;
			}
			.div01 > span {
				font-size: 2em;
			}
			.div02 > span{
				font-size: 2em;
			}
			.div03{
				font-size: 5px;
			}
			.div03 > span{
				font-size: 1rem;
			}
			
			/* em 父元素宽度的几倍 */
			/* rem html元素宽度的几倍 */
		</style>
	</head>
	<body>
		<div class="div01">
			<span>字体大小</span><span>字体大小</span><span>字体大小</span>
		</div>
		<div class="div02">
			<span>字体大小</span><span>字体大小</span><span>字体大小</span>
		</div>
		<div class="div03">
			<span>字体大小</span><span>字体大小</span><span>字体大小</span>
		</div>
	</body>
</html>
